<template>
  <footer :style="{ backgroundColor: curMenu.color }">
    <div
      v-for="(item, index) in menuList"
      :key="index"
      @click="changeColor(item)"
    >
      <router-link :to="item.path">{{ item.name }}</router-link>
    </div>
  </footer>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      curColor: "red",
      menuList: [
        { path: "/", name: "剧集", color: "red" },
        { path: "/music", name: "音乐", color: "green" },
        { path: "/book", name: "图书", color: "skyblue" },
        { path: "/chat", name: "天气", color: "orange" },
      ],
    };
  },
  methods: {
    // ...mapMutations(["setCurMenu"]),

    changeColor(it) {
      this.curColor = it.color;
      this.$store.commit("setCurMenu", it);
    },
  },
  computed: {
    ...mapState(["curMenu"]),
  },
};
</script>

<style lang="scss" scoped>
footer {
  position: fixed;
  bottom: 0;
  height: 1rem;
  width: 100%;
  line-height: 1rem;
  text-align: center;
  background-color: gray;
  // color: white;
  display: flex;
  justify-content: space-around;
}
</style>